<template>
    <div class="index">
        <ly-tab
                v-model="selectedId"
                :items="categorys"
                :options="options"
                @change="getByTabbar"
        >
        </ly-tab>
        <transition name="fade">
            <audio-lists :items="audios" @scrollToEnd="loadMore" v-if="showLists"></audio-lists>
        </transition>
    </div>
</template>

<script>
    import AudioLists from '@/components/audio-lists/audio-lists';
    import Vue from 'vue';
    import LyTab from 'ly-tab';
    import {Notify} from 'vant';

    Vue.use(LyTab);

    var ERR_OK = 1;
    export default {
        name: "index",
        data() {
            return {
                selectedId: 0,
                categorys: [],
                options: {
                    activeColor: '#ffcd32',
                },
                params: {
                    page: 1,
                    category_id: 0
                },
                audios: [],
                showLists: false,
            }
        },
        created() {
            this.$store.commit("setPlayerStatus", true);
            this.getTabbars();
        },
        methods: {
            // 分类
            getTabbars: function () {
                this.$http.get("/resource/getCategories").then((response) => {
                    var rs = response.data;
                    if (rs.code === ERR_OK) {
                        var categorys = [{
                            label: "全部",
                            category_id: 0
                        }];
                        var data = rs.data;
                        for (var i = 0; i < data.length; i++) {
                            categorys.push({
                                label: data[i].alias,
                                category_id: data[i].id
                            });
                        }
                        this.categorys = categorys;
                    }
                    this.getByTabbar({}, 0);
                });
            },
            // 获取
            getByTabbar: function (itemObj, i) {
                this.showLists = false;
                var item = this.categorys[i];
                this.params.page = 1;
                this.params.category_id = item.category_id;
                this.getAudioLists((response) => {
                    var rs = response.data;
                    if (rs.code === ERR_OK) {
                        this.audios = rs.data;
                        this.showLists = true;
                    }
                });
            },
            // 分页
            loadMore() {
                this.params.page += 1;
                this.getAudioLists((response) => {
                    var rs = response.data;
                    if (rs.data.length <= 0) {
                        Notify({
                            message: '没有内容了',
                            duration: 800,
                            background: '#ffcd32',
                        });
                    }
                    if (rs.code === ERR_OK) {
                        this.audios = this.audios.concat(rs.data);
                    }
                });
            },
            // 查询(应作 api.js 引入)
            getAudioLists(callback) {
                var params = this.params;
                this.$http.get("/resource/getAudioLists", {
                    params
                })
                    .then((response) => {
                        callback && callback(response)
                    });
            }
        },
        components: {
            AudioLists
        }
    }
</script>

<style scoped>
    .index >>> .audios {
        margin-top: 40px;
    }

    .fade-enter-active {
        transition: opacity 1.5s;
    }

    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
    {
        opacity: 0;
    }
</style>